<template>
  <body>
  <v-indexTop1></v-indexTop1>
  <div class="chat-history-wrap">
  <div class="job-tab">
    <span>沟通过</span>
    <span class="cont">已投递</span>
    <span>面视</span>
    <span>感兴趣</span>
  </div>
    <br>
    <ul>
      <li class="item-spi"  v-for="data in data_list">
        <div  class="figure">
        <img  :src= img[1]>
        </div>
        <div class="item-con">
          <div class="info-header">
            <div  class="btns">
              <a  href="javascript:;" class="btn btn-startchat">继续沟通</a>
              <!---->
              <!---->
              <!---->
            </div>
            <h3 class="name">招聘经理
            <em class="vilne"></em>
            HR
            </h3>
          </div>
          <div class="info-primary ">
            <div class="company-info">
              <img :src=img[0]>
              <div  class="text">
                <b><a href="javascript:;">{{data.rc_name}}</a></b>
                <p class="gray"> {{data.rc_label}}  · {{data.rc_financing}}  · {{data.rc_scale}} </p></div></div>
            <div class="job-info">
              <div class="job-name">
                <a  href="javascript:;" @click="Jump(data.rec_id)">
                  <span  class="jobname">{{data.rec_name}}</span>
                  <!----><!---->
                  <span  class="salary">{{data.rec_wage}}</span>
                </a>
              </div>
              <p  class="gray">
                  <!----> {{data.rec_PostAsk}}
                  <em class="vline"></em>
                  {{data.rec_address}}
                </p>
            </div>
          </div>
          <br>
          <div  class="btn-Delete">
            <el-button type="" size="mini" @click="Delete(data.ru_id)" round>取消申请</el-button>
          </div>
        </div>
      </li>
      <br>
      <el-pagination
      background
      page-size="5"
      layout="prev, pager, next"
      :total=total>
      </el-pagination>
    </ul>
  </div>
  </body>
</template>

<script>
  import indexTop1 from './assemblyPublic/Index-top1';
    export default {
        name: "SubmitResumePage",
       data(){
       return{
         total:5,
         data_list:'',
         img:[
            require('../assets/img/gongshi.jpg'),
            require('../assets/img/moren.jpg')
         ],
       }
       },
        mounted:function(){
          this.loading();
        },
        methods:{
            Jump(pk) {
              this.$session.set('red_id', pk);
              this.$router.push({
                name: 'Detailspage',
                params: {
                  rec_id: pk
                }
              })
            },
          Delete(val) {
            this.$axios({
              method: 'POST',
              url: 'api/ru_delete',
              data: {
                ru_id: val
              }
            }).then((result) => {
              if (result.data.case == 'ok') {
                this.$message({
                  message: '删除成功！',
                  type: 'success',
                  center: true
                });
                this.loading()
              }else{
                this.$message.error('删除失败！！');
              }
            }).catch((err) => {
              console.log(err)
            })
          },

          loading(){
            this.$axios({
              method:'GET',
              url:'api/job_load',
            }).then((data_json)=>{
              console.log(data_json);
              if (data_json.data.state == 'ok'){
                this.total = data_json.data.total;
                this.data_list = data_json.data.data_list;
              }else{
               this.$message('你还未投递简历哟！');
              }
            }).catch((err)=>{
              console.log(err)
            })
          },
        },
         components: {
          "v-indexTop1" : indexTop1,
        },
    }
</script>

<style scoped>
   body{
    width: 100%;
    height: 100%;
    /*background-color:#f0f0f0;*/
  }
  .chat-history-wrap{
    width: 45%;
    float: left;
    height: 100%;
    /*background: pink;*/
    margin-left: 10%;
  }
    .job-tab {
      width: 100%;
      height: 46px;
      border-bottom: 2px solid #f2f2f5;
      padding: 0 30px;
      line-height: 44px;
    }
    .job-tab span {
      float: left;
      display: inline-block;
      margin-right: 36px;
      font-size: 15px;
      color: #9fa3b0;
      border-bottom: 2px solid transparent;
      position: relative;
      margin-bottom: -2px;
    }
    .job-tab .cont{
      color: #54cbc4;
       border-bottom-color: #00d7c6;
    }
  .chat-history-wrap ul{
    padding: 10px 30px;
    list-style: none;
  }
  .item-spi{
    padding: 17px 0;
    border-bottom: 1px solid #edf0f5;
    list-style: none;
  }
  .figure{
        float: left;
    padding: 0 15px 0 5px;
  }
  .figure img{
    width: 42px;
    height: 42px;
    border-radius: 100%;
  }
  .item-con{
        margin-left: 65px;
  }
  .item-con .info-header{
    overflow: hidden;
    margin-bottom: 9px;
    min-height: 32px;
  }
   .item-con .info-header .btns{
      float: right;
      display: none;
   }
   .item-con .info-header .btns .btn{
      height: 32px;
      line-height: 30px;
      font-size: 13px;
      padding: 0 15px;
      border-radius: 2px;
      color: #fff;
      letter-spacing: 1px;
      background: #5dd5c8;
      border: 1px solid #5dd5c8;
      margin-left: 15px;
      cursor: pointer;
     display: inline-block;
   }
   .info-header .name{
      font-weight: 400;
      font-size: 16px;
      float: left;
   }
  .vilne{
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 10px;
  }
  .info-primary{
    background-color: #fafafc;
    overflow: hidden;
    padding: 10px 20px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .company-info{
    float: right;
    text-align: right;
    width: 270px;
  }
  .company-info img{
        width: 42px;
    height: 42px;
    float: right;
    margin-top: 4px;
    margin-left: 10px;
  }
  .company-info .text{
    margin-right: 52px;
  }
  .company-info .text b {
      font-weight: 400;
  }
   .company-info .text p {
     font-size: 12px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: #9fa3b0;
   }
   .company-info .text b a{
         color: #414a60;
  }
   .company-info .text b a:hover {
     color: #66b1ff;
   }
  .job-info {
    line-height: 26px;
    float: left;
  }
  .job-info .job-name a{
    color: #414a60;
  }
   .job-info .job-name a:hover{
    color: #66b1ff;
  }
  .job-info .jobname {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-weight: 900
  }
  .job-info .salary{
        padding-left: 20px;
    color: #fc6c38;
  }
  .job-info p em{
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 10px;
  }
  .job-info .gray {
    font-size: 12px;
    color: #9fa3b0;
  }

</style>
